<template>
  <up-popup
   :show="show"
    safe-area-inset-bottom
    border-radius="24"
    mode="center"
    width="86%"
    :closeable="false"
    @close="handleClose"
  >
    <view class="pop-normal-view">
      <view class="title-view">{{ title }}</view>
      <view class="content-view">
        <view v-if="content">{{ content }}</view>
        <slot v-else />
      </view>
     
      <view class="buttons-view">
        <view v-if="showCancel" class="left-view">
          <u-button
            :custom-style="customCancel"
            @click="handleClickCancel"
          >
            <view class="cancel-view">{{ cancelText }}</view>
          </u-button>
        </view>
        <view class="right-view">
          <u-button
            :loading="loading"
            :type="customConFirm.type"
            :custom-style="customConFirm"
            @click="handleClickConfirm"
          >
            <view class="confirm-view">{{ confirmText }}</view>
          </u-button>
        </view>
      </view>
      <view
        v-if="bottomTip && !isShare"
        :class="['bottom-tip', { select: select }]"
        :hover-class="isSelect ? 'u-hover-class' : ''"
        @click="$u.throttle(handleSelect, 500)"
      >
        <view :class="['icon-view', { select: select }]">
          <u-icon
            name="checkbox-mark"
            v-if="select"
            color="#02a074"
            size="24"
          ></u-icon>
        </view>
        <view class="tip-view">{{ bottomTip }}</view>
      </view>
    </view>
  </up-popup>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "温馨提示",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    confirmText: {
      type: String,
      default: "确认",
    },
    bottomTip: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    // normal 普通; error 红色确认；select 底部有个勾选；share 分享领三天会员；renew 续费提示
    type: {
      type: String,
      default: "normal",
    },
    loadingShow: {
      type: Boolean,
      default: false,
    },
    tipSelected: {
      type: Boolean,
      default: false,
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
      select: false,
      loading: false,
    };
  },
  watch: {
    visible(val) {
      this.show = val;
      this.loading = false;
      if (val) {
        this.select = this.tipSelected;
      }
    },
  },
  computed: {
    cancelImage() {
      return indexBaseUrl + "fenxianglinghuiyuan@3x.png";
    },
    isShare() {
      return this.type == "share";
    },
    isError() {
      return this.type == "error";
    },
    isSelect() {
      return this.type == "select";
    },
    isRenew() {
      return this.type == "renew";
    },
    customCancel() {
      return {
        color: "transparent",
        height: "96rpx",
        width: "264rpx",
        border: "2rpx solid #5ACEE0",
        "border-radius": "16rpx",
      };
    },
    customConFirm() {
      return {
        color: "transparent",
        "background-color": this.isError ? "#FC524D" : "#5ACEE0",
        height: "96rpx",
        width: "264rpx",
        "border-radius": "16rpx",
      };
    },
  },
  methods: {
    changeVisibleValue(val) {
		console.log("changeVisibleValue",val);
      this.show = val;
      this.$emit("update:visible", val);
    },
    handleClickConfirm() {
      this.loading = this.loadingShow;
      this.changeVisibleValue(false);
      this.$emit("confirm", this.select);
      if (this.isShare || this.isRenew) {
        // 去开通会员
        uni.navigateTo({
          url: "pages/mine/pay/pay",
          animationType: "pop-in",
        });
      }
    },
    handleClose() {
      this.changeVisibleValue(false);
      this.$emit("cancel");
    },
    handleClickCancel() {
      this.changeVisibleValue(false);

      if (this.isShare) {
        // 分享领会员
        this.$emit("share");
      } else {
        this.$emit("cancel");
      }
    },
    handleSelect() {
      this.select = !this.select;
    },
    changeStatusDisplay() {
      this.changeVisibleValue(false);
    },
  },
};
</script>

<style lang="scss" scoped>
.pop-normal-view {
  text-align: center;
  padding: 24rpx 32rpx;
  background-image: linear-gradient(to bottom, #f4fffc 0%, #ffffff 50%);

  .title-view {
    color: #333333;
    font-weight: bold;
    font-size: 40rpx;
    margin: 32rpx 0 24rpx 0;
  }
  .content-view {
    padding: 20rpx 32rpx;
    color: #191c27;
    font-size: 32rpx;
    min-height: 220rpx;
    line-height: 54rpx;
  }
  .red-text {
    color: #fc524d;
  }
  .buttons-view {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32rpx;
    .left-view {
      margin-right: 30rpx;
      .cancel-view {
        color: #5ACEE0;
        height: 96rpx;
        line-height: 96rpx;
        font-weight: bold;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .cancel-image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 14rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .right-view {
      .confirm-view {
        color: #ffffff;
        height: 96rpx;
        line-height: 96rpx;
        font-weight: bold;
        font-size: 32rpx;
      }
    }
  }
  .bottom-tip {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-bottom: 24rpx;

    &.select {
      margin-top: 16rpx;
    }
    .icon-view {
      width: 32rpx;
      height: 32rpx;
      border-radius: 8rpx;
      border: 2rpx solid #333333;
      margin-right: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &.select {
        border: 2rpx solid #df7922;
      }
    }
    .tip-view {
      text-align: left;
      color: #8d8d8d;
      font-size: 24rpx;
    }
  }
}
</style>
